<!--角色管理-->
<template>
  <div class="role-manage">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-jiaoseguanli" />
        </div>
        <span>角色管理</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" @click="roleClick('add')">新增角色</a-button>
      </div>
      <!-- 角色管理表格 -->
      <el-table
        :data="roleTableData"
        highlight-current-row
        border
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
        style="width: 100%">
        <slot v-for="(item,index) in roleColumns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a-dropdown :trigger="['click']" placement="bottomRight">
              <a class="ant-dropdown-link">权限</a>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="dialogMenuVisible = true"><a-icon type="unordered-list" />菜单权限</a-menu-item>
                <a-menu-divider />
                <a-menu-item key="2" @click="dialogClassifyVisible = true"><a-icon type="appstore" />分类权限</a-menu-item>
                <a-menu-divider />
                <a-menu-item key="3" @click="dialogBgqxVisible = true"><a-icon type="history" />保管期限权限</a-menu-item>
                <a-menu-divider />
                <a-menu-item key="4" @click="dialogSecurityVisible = true"><a-icon type="safety" />密级权限</a-menu-item>
              </a-menu>
            </a-dropdown>
            <a-divider type="vertical" />
            <a @click="roleClick('edit', scope.row)">编辑</a>
            <a-divider type="vertical" />
            <a @click="roleClick('del', scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>

    <!-- 角色管理弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalTitle"
      v-model="dialogFormVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="角色名称">
          <a-input v-decorator="['U_Name', {rules: [{ required: true, message: '请输入角色名称!' }]} ]" />
        </a-form-item>
        <a-form-item label="备注">
          <a-input type="textarea" v-decorator="[ 'U_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 菜单权限弹出框 -->
    <a-modal
      :maskClosable="false"
      title="菜单权限分配"
      v-model="dialogMenuVisible">
      <div style="height: 400px;overflow: auto;">
        <a-tree
          show-line
          checkable
          :treeData="menuData"
          :default-checked-keys="[2, 3]"
          defaultExpandAll>
        </a-tree>
      </div>
    </a-modal>

    <!-- 分类权限弹出框 -->
    <a-modal
      :maskClosable="false"
      title="分类权限分配"
      v-model="dialogClassifyVisible"
      width="80%"
      class="classify-modal">
      <div class="classify-box">
        <div class="classify-left">
          <a-tree
            show-line
            checkable
            :treeData="menu1Data"
            :default-checked-keys="[6]"
            defaultExpandAll>
          </a-tree>
        </div>
        <div class="classify-center">
          <a-tree
            show-line
            checkable
            :treeData="classifyData"
            :default-checked-keys="[1]"
            defaultExpandAll>
          </a-tree>
        </div>
        <div class="classify-right">
        </div>
      </div>
    </a-modal>

    <!-- 保管期限弹出框 -->
    <a-modal
      :maskClosable="false"
      title="保管期限权限"
      v-model="dialogBgqxVisible">
      <div style="height: 400px;overflow: auto;">
        <a-tree
          show-line
          checkable
          :treeData="bgqxData"
          :default-checked-keys="[5]"
          defaultExpandAll>
        </a-tree>
      </div>
    </a-modal>

    <!-- 密级权限弹出框 -->
    <a-modal
      :maskClosable="false"
      title="密级权限"
      v-model="dialogSecurityVisible">
      <div style="height: 400px;overflow: auto;">
        <a-tree
          show-line
          checkable
          :treeData="securityData"
          :default-checked-keys="[4]"
          defaultExpandAll>
        </a-tree>
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'RoleManage',
  components: {
  },
  data () {
    return {
      roleTableData: [{ // 角色表格数据
        U_Name: 'aaa',
        U_Remark: '11'
      }, {
        U_Name: 'bbb',
        U_Remark: '22'
      }, {
        U_Name: 'ccc',
        U_Remark: '33'
      }, {
        U_Name: 'ddd',
        U_Remark: '44'
      }],
      roleColumns: [{ // 角色表头数据
        title: '角色名称',
        field: 'U_Name'
      }, {
        title: '备注',
        field: 'U_Remark'
      }],
      modalTitle: '', // 角色弹框标题
      dialogFormVisible: false, // 角色弹框显示与隐藏
      form: this.$form.createForm(this),
      dialogMenuVisible: false, // 菜单权限弹框显示与隐藏
      menuData: [{ // 菜单权限树数据
        key: 1,
        title: '系统设置',
        children: [
          {
            key: 4,
            title: '数据字典'
          },
          {
            key: 5,
            title: '系统参数'
          },
          {
            key: 6,
            title: '全文路径管理'
          },
          {
            key: 7,
            title: '修改密码'
          },
          {
            key: 8,
            title: '全宗管理'
          },
          {
            key: 9,
            title: '门类管理'
          },
          {
            key: 10,
            title: '分类管理'
          }
        ]
      }, {
        key: 2,
        title: '安全管理',
        children: [{
          key: 11,
          title: '用户管理'
        }, {
          key: 12,
          title: '角色管理'
        }]
      }, {
        key: 3,
        title: '档案采集',
        children: [{
          key: 13,
          title: '档案管理'
        }, {
          key: 14,
          title: '电子文件中心'
        }]
      }],
      dialogClassifyVisible: false, // 分类权限弹框显示与隐藏
      menu1Data: [{ // 分类权限左侧树数据
        key: 1,
        title: '档案整编',
        children: [{
          key: 2,
          title: '上海市证监局',
          children: [
            {
              key: 3,
              title: '诉讼档案'
            },
            {
              key: 4,
              title: '科研档案以件整理'
            },
            {
              key: 5,
              title: '党群档案以件整理'
            },
            {
              key: 6,
              title: '数据汇总以卷整理'
            },
            {
              key: 7,
              title: '影视档案'
            }
          ]
        }]
      }],
      classifyData: [{ // 分类权限右侧树数据
        key: 1,
        title: '1990-1999 19990年-1999年',
        children: [{
          key: 2,
          title: '1990 1990年'
        },
        {
          key: 3,
          title: '1991 1991年'
        },
        {
          key: 4,
          title: '1992 1992年'
        },
        {
          key: 5,
          title: '1993 1993年'
        },
        {
          key: 6,
          title: '1994 1994年'
        },
        {
          key: 7,
          title: '1995 1995年'
        },
        {
          key: 8,
          title: '1996 1996年'
        },
        {
          key: 9,
          title: '1997 1997年'
        },
        {
          key: 10,
          title: '1998 1998年'
        },
        {
          key: 11,
          title: '1999 1999年'
        }]
      }],
      dialogBgqxVisible: false, // 保管期限权限弹框显示与隐藏
      bgqxData: [{ // 保管期限树数据
        key: 1,
        title: '永久'
      }, {
        key: 2,
        title: '30年'
      }, {
        key: 3,
        title: '10年'
      }, {
        key: 4,
        title: '长期'
      }, {
        key: 5,
        title: '短期'
      }],
      dialogSecurityVisible: false, // 密级权限弹框显示与隐藏
      securityData: [{ // 密级权限树数据
        key: 1,
        title: '绝密'
      }, {
        key: 2,
        title: '机密'
      }, {
        key: 3,
        title: '秘密'
      }, {
        key: 4,
        title: '密件'
      }]
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    roleClick (val, row) {
      switch (val) {
        case 'add':
          this.modalTitle = '角色新增'
          this.dialogFormVisible = true
          break
        case 'edit':
          this.modalTitle = '角色编辑'
          this.dialogFormVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>
<style lang="less" scoped>
.role-manage {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
}
.classify-modal {
  /deep/ .ant-modal-body {
    .classify-box {
      display: flex;
      .classify-left {
        width: 25%;
        border-right: 1px solid #EEE;
        height: 400px;
        overflow: auto;
      }
      .classify-center {
        width: 25%;
        border-right: 1px solid #EEE;
        height: 400px;
        overflow: auto;
      }
      .classify-right {
        flex: 1;
        height: 400px;
        overflow: auto;
      }
    }
  }
}
</style>
